<template>
    <i-content :spinShow="loading">
        <i-search v-model="search">
            <FormItem label="订单编号">
                <Input v-model="search.order_code" placeholder="订单编号" size="small"></Input>
            </FormItem>
            <FormItem label="订单状态">
                <Select v-model="search.status" clearable size="small" style="width: 150px;">
                    <Option :value="0">对接中</Option>
                    <Option :value="1">对接失败</Option>
                    <Option :value="2">待发货</Option>
                    <Option :value="3">已发货</Option>
                </Select>
            </FormItem>
            <FormItem label="更新时间">
                <date-time-range v-model="search.updated_at" size="small"></date-time-range>
            </FormItem>
            <FormItem :label-width="1">
                <Button type="primary" icon="ios-search" @click="getLists(1)" size="small">搜索</Button>
                <Button type="error" icon="ios-add" @click="exportOrder" size="small">导出订单</Button>
                <Button type="error" icon="ios-add" @click="exportOrderTrackingNumber" size="small">导出物流单号</Button>
                <Button type="success" icon="ios-add" @click="openComponent('Import')" size="small">导入</Button>
            </FormItem>
        </i-search>

        <i-table :current="page.current" :table="table" :total="page.total" @on-page-change="pageChange">
            <template slot-scope="{ row, index }" slot="action">
                <Button size="small" @click="redeclare(row.id)">申报</Button>
            </template>
            <template slot-scope="{ row, index }" slot="status">
                <Tooltip :content="row.remark" placement="left">
                    <Tag v-if="row.status === 0">对接中</Tag>
                    <Tag v-if="row.status === 1">对接失败</Tag>
                    <Tag v-if="row.status === 2">待发货</Tag>
                    <Tag v-if="row.status === 3">已发货</Tag>
                </Tooltip>

            </template>
        </i-table>

        <component v-bind:is="component.is" :props="component.prop" @on-close="closeComponent"
                   @on-refresh="getLists"></component>
    </i-content>
</template>

<script>
    import IContent from "../../../components/content/index";
    import ISearch from "../../../components/content/search";
    import ITable from "../../../components/content/table";
    import contentListPage from "../../../mixins/content-list-page";
    import Import from '../import/index'
    import DateTimeRange from "../../../components/form/dateTimeRange";

    export default {
        name: "index",
        mixins: [contentListPage],
        components: {DateTimeRange, ITable, ISearch, IContent, Import},
        data() {
            return {
                table: {
                    columns: [
                        {
                            title: '订单号',
                            key: 'order_code'
                        }, {
                            title: '订购人姓名',
                            key: 'buyer_name'
                        }, {
                            title: '订购人身份证',
                            key: 'buyer_id_number'
                        },
                        {
                            title: '订购人手机号',
                            key: 'buyer_phone'
                        },
                        {
                            title: '收件人',
                            key: 'receiving_name'
                        }, {
                            title: '收件人手机号',
                            key: 'receiving_phone'
                        }, {
                            title: '收件人地址',
                            key: 'receiving_address'
                        }, {
                            title: '状态',
                            slot: 'status'
                        },
                        {
                            title: '操作',
                            slot: 'action'
                        }
                    ]
                },
                search: {}
            }
        },
        methods: {
            getLists(page = 1) {
                this.loading = true;
                this.$http.get(`order/list`, {
                    params: Object.assign({}, this.search, {page: page})
                }).then((data) => {
                    this.table.data = data.data
                    this.page.total = data.total
                    this.page.current = data.current_page
                }).finally(() => {
                    this.loading = false;
                });
            },
            redeclare(id) {
                this.loading = true;
                this.$http.get(`order/list/redeclare/${id}`).then((res) => {
                    this.getLists(1);
                }).catch(() => {
                    this.loading = false;
                })
            },
            exportOrder() {
                this.loading = true;
                this.$http.download(`order/list/export`, Object.assign({}, this.search), '订单导出.xlsx').finally(() => {
                    this.loading = false;
                });
            },
            exportOrderTrackingNumber(){
                this.loading = true;
                this.$http.download(`order/list/export_tracking`, Object.assign({}, this.search), '快递单号.xlsx').finally(() => {
                    this.loading = false;
                });
            }
        }
    }
</script>

<style scoped>

</style>